<template>
  <div id="select_student" class="container">
    <div class="content">
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              v-model="tabledisplayObj.keyword"
              style="width:20%;float: left;margin-left:.1rem;"
              placeholder="输入姓名 手机号"
              class="input_search"
              clearable
            ></el-input>
            <div class="search_btn" style="margin-left:0.1rem;" @click="searchStudent">搜索</div>
            <div class="btn_user_defined" style="margin-left:0.1rem;" @click="reset">重置</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0" style="border-collapse: collapse;">
            <thead class="thead">
              <tr>
                <td style="width: 2rem;">姓名</td>
                <td style="width: 2rem;">年龄</td>
                <td style="width: 2rem;">电话</td>
                <td style="width: 2rem;">状态</td>
                <td style="width: 2rem;">渠道来源</td>
                <td style="width: 2rem;">跟单人</td>
                <td style="width: 3rem;">末次回访时间</td>
                <td style="width: 3rem;">末次回访内容</td>
                <td style="width: 3rem;">录入时间</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr
                class="tbody_tr"
                v-for="item in clueList"
                :class="{tbody_tr_active:item.isCheck}"
                @click="itemCheck(item)"
              >
                <td>{{item.realName}}</td>
                <td v-if="item.age != null">{{item.age}}岁</td>
                <td v-else>未知</td>
                <td>{{item.phone}}</td>
                <td>
                  <span
                    :style="{color : stateColor[item.clueStatus]}"
                  >{{clueStatusMap[item.clueStatus]}}</span>
                </td>
                <td>{{item.channelName}}</td>
                <td>{{item.executeUserName}}</td>
                <td>{{item.lastVisitTime}}</td>
                <td v-if="item.lastVisitContent == null">--</td>
                <td
                  v-else
                  style="line-height: 0.4rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                >{{item.lastVisitContent}}</td>
                <td>{{item.createTime}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
        <div class="foot_btn">
          <el-button
            type="primary"
            style="width:1.2rem;"
            :disabled="!isSelect"
            @click="selectStudent"
          >确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
export default {
  components: {},
  data() {
    return {
      tabledisplayObj: {
        keyword: "",
        currPage: 1,
        pageSize: 10,
        campusId: this.$store.state.campusId,
        type: 0,
        total: 0
      },
      isSelect: false,
      clueStatusMap: [],
      clueList: [],
      selectClueData: {},
      stateColor: {
        "1": "#2e83f6", //蓝色
        "2": "#2e83f6", //蓝色
        "3": "#2e83f6", //蓝色
        "4": "#2e83f6", //蓝色
        "5": "#2e83f6", //蓝色
        "6": "#19b10d", //绿色
        "7": "#ff5252", //红色
        "8": "#2e83f6" //蓝色
      }
    };
  },
  methods: {
    searchStudent(){
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    },
    campusChange: function(campusId) {
      vm.tabledisplayObj= {
        keyword: "",
        currPage: 1,
        pageSize: 10,
        campusId: this.$store.state.campusId,
        type: 0,
        total: 0
      };
      vm.initData();
    },
    itemCheck(item) {
      if (item.isCheck) return;
      vm.isSelect = true;
      vm.clueList.forEach(clue => {
        clue.isCheck = false;
      });
      item.isCheck = true;
      vm.selectClueData = item;
    },
    initData() {
      api.clueList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(function(item) {
            item.isCheck = false;
            item.phone =
              item.parentData && item.parentData[0]
                ? item.parentData[0].phone
                : "";
          });
          vm.clueList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    selectStudent() {
      if (vm.selectClueData.clueId && vm.selectClueData.clueId != null) {
        vm.$emit("ok", { clue: vm.selectClueData });
      } else {
        this.$message.warning("请选择学员");
      }
    },
    reset() {
      vm.tabledisplayObj = {
        keyword: "",
        currPage: 1,
        pageSize: 10,
        campusId: this.$store.state.campusId,
        type: 0,
        total: 0
      };
      vm.initData();
    },
    /**每页数量改变 */
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
       vm.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
       vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.clueStatusMap = tool.parseDict(dicdata["clue_status"]);
    vm.initData();
  }
};
</script>

<style lang="scss">
#select_student {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .btn_editor {
    font-size: 0.16rem;
  }
  .tbody_tr {
    cursor: pointer;
  }
  .tbody_tr_active {
    border:1px solid #3885f8 !important;
    // background: #3885f8;
    // color: #ffffff;
  }
  .foot_btn {
    margin-top: 0.1rem;
    width: 100%;
    text-align: center;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>